import React, { Component } from 'react';


class Demo extends Component{
  state={}

  static getDerivedStateFromProps(props,state){
    console.log('props更新了执行getDerivedStateFromProps')
    return null;
  }

shouldComponentUpdate(nextProps,nextState){
  console.log('props更新执p行shouldComponentUpdate')
  return true;
}

  render(){
    console.log('props更新执p行render')
    return <h1>Demo组件 {this.props.msg}</h1>;
  }


  getSnapshotBeforeUpdate(props,state){
    console.log("props更新执p行getsnapshotBeforeUpdate")
    return 100
  }
  componentDidUpdate(props, state, snapshot) {
    console.log("props更新执p行componentDidUpdate")
    console.log("来自 getSnapshotBeforeUpdate的值:", snapshot);
  }
}




class App extends Component{
  state={
    msg:"data最原始的msg"
  }
  handleClick=()=>{
    this.setState({
      msg:'点击改变了msg'
    })
  }

render(){
 return(
  <div>
  <Demo msg={this.state.msg}></Demo>
  <button onClick={this.handleClick}>更新props</button>
</div>
 )
}
}

export default App;

